<template>
  <div>
    <el-row class="tac">
      <el-col :span="4">
        <h5 style="text-align: center">个人信息</h5>
        <el-menu
            active-text-color="#ec6c0a"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            @select="handSelect">
          <el-menu-item index="1">
            <i class="el-icon-user-solid"></i>
            <span slot="title">基本信息</span>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-key"></i>
            <span slot="title">密码修改</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-document"></i>
            <span slot="title">实名认证</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-notebook-2"></i>
            <span slot="title">订单查看</span>
          </el-menu-item>
        </el-menu>
      </el-col>
<!--      -->
      <el-col span="20">
<!--        个人信息-->
        <div v-if="currentIndex == '1'" style="margin-left: 5px">
          <el-descriptions class="margin-top" :column="1" size="small" border>
            <template slot="title">
              <div>
                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" :size="50"></el-avatar>
              </div>
            </template>
            <template slot="extra">
              <el-button type="primary" icon="el-icon-edit" circle></el-button>
            </template>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                用户名
              </template>
               test
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                昵称
              </template>
               小美
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                手机号
              </template>
               13254585451
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                联系地址
              </template>
               成都市双流区
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                邮箱
              </template>
               13254585451@qq.com
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                服务类型
              </template>
              <el-tag size="small" style="margin-right: 5px">日常保洁</el-tag>
              <el-tag size="small" style="margin-right: 5px">幼儿保姆</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-document-checked"></i>
                是否实名
              </template>
              <el-tag type="success">是</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </div>
<!--        密码修改-->
        <div v-if="currentIndex == '2'" style="margin-left: 5px;width: 90%" >
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="原密码" prop="oldPass">
              <el-input type="password" v-model="ruleForm.oldPass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPass">
              <el-input type="password" v-model="ruleForm.newPass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="checkPass">
              <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
<!--        实名认证-->
        <div v-if="currentIndex == '3'" style="margin-left: 5px">
          <el-empty :image-size="100"></el-empty>
        </div>
<!--        订单查询-->
        <div v-if="currentIndex == '4'" style="margin-left: 5px; align-content: center">
          <el-steps :space="200" :active="3" finish-status="success">
            <el-step title="已付款"></el-step>
            <el-step title="已确认"></el-step>
            <el-step title="待服务"></el-step>
            <el-step title="已完成"></el-step>
          </el-steps>
          <el-descriptions title="订单信息" :column="1">
            <el-descriptions-item label="用户名">1</el-descriptions-item>
            <el-descriptions-item label="订单状态">
              <el-tag size="small">待服务</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="预约时间">2023-04-21 16:21:51</el-descriptions-item>
            <el-descriptions-item label="创建时间">2023-04-21 16:22:01</el-descriptions-item>
            <el-descriptions-item label="完成时间">---</el-descriptions-item>
          </el-descriptions>

        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "WorkerIndex",
  data(){
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入原密码'));
      } else {

        callback();
      }
    };
    var validatePass1 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      currentIndex:"1",
      id:"",
      notFinishOrder:{},
      stepNub:'',
      worker: {
        /*name: '',
        password: '',
        nickname: '',
        phone: '',
        enable: '',
        address: '',
        email: ''*/
      },
      serveItem:[],
      ruleForm: {
        oldPass: '',
        newPass: '',
        checkPass: '',
      },
      rules: {
        oldPass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        newPass: [
          { validator: validatePass1, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
      }
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handSelect(key, keyPath){
      this.currentIndex = key;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
          this.worker.password = this.ruleForm.newPass;
          let url = 'http://localhost:9081/worker/' + this.worker.id + '/update';
          console.log('url = ' + url);

          let formData = this.qs.stringify(this.worker);
          console.log('formData = ' + formData);

          this.axios.post(url,formData).then((response) => {
            let responseBody = response.data;
            console.log(responseBody);
            if (responseBody.state == 20000) {
              this.$message({
                showClose: true,
                message: '修改密码成功！',
                type: 'success'
              });
              this.resetForm(formName);
            } else {
              this.$message({
                showClose: true,
                message: responseBody.message,
                type: 'error'
              });
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    loadWorker(){
      let url = 'http://localhost:9081/workers/selectById/id=' + this.id;
      console.log('url = ' + url);

      this.axios.get(url).then((response) => {
        let responseBody = response.data;
        console.log('state=' + responseBody.state);
        console.log('message=' + responseBody.message);
        this.worker = responseBody.data;
      })
    },
    loadServeItem(){
      let url = 'http://localhost:9081/serve-item/selectByWorkerId/' + this.worker.id;
      console.log('url = ' + url);

      this.axios.get(url).then((response) => {
        let responseBody = response.data;
        this.serveItem = responseBody.data;
      })
    },
    loadOrder(){
      let url = 'http://localhost:9081/workers/getNotFinishByWorkerId/' + this.worker.id;
      console.log('url = ' + url);

      this.axios.get(url).then((response) => {
        let responseBody = response.data;
        this.notFinishOrder = responseBody.data;
        this.stepNub = this.notFinishOrder.state;
      })
    }
  },
  mounted() {

    this.id=this.$route.query.workId;
    console.log('当前的用户id：',this.id)
    this.loadWorker();

  },
  watch: {

  },

}
</script>

<style scoped>
.el-menu-item.is-active{
  background-color: #ffffff !important;
}

</style>